<template>
	<view class="winning-wrap padding24">
		<view class="mc-bold" style="font-size: 48upx;color: #fff14c;" v-if="isMe">恭喜您中奖了！</view>
		<view class="mc-bold" style="font-size: 48upx;" v-else>很遗憾，您没有中奖</view>
		<view class="mc-f12 margin-top20" style="color: #d7d5d6;">中奖名单</view>
		<view class="border-radius10 mc-ovh margin-top20">
			<view class="mc-f13 text-center" style="line-height: 72upx;background-color: #5618dd;" >{{code.title}}</view>
			<view class="mc-columns mc-flex-vcenter" style="background-color: #6747e8;padding: 40upx 24upx;">
				<image :src="code.photo" mode="aspectFill" style="width: 112upx;height: 112upx;" class="border-radius"></image>
				<view class="mc-f13 margin-top20">{{code.nickName||''}}</view>
				<view class="mc-f13 margin-top20" style="color: #fff14e;">幸运码 ：{{code.drawCode||''}}</view>
				<form @submit="setFormId" report-submit="true" class="pct100" v-if="isMe">
					<button form-type="submit" type="primary" style="background-color: #eb977d;width: 100%;" class="border-radius margin-top20 mc-f15" v-if="receiveInfo && receiveInfo.remark">{{receiveInfo.status==1?'已发放':'已领取'}}</button>
					<button form-type="submit" @tap="toFound" type="primary" style="background-color: #f06338;width: 100%;" class="border-radius margin-top20 mc-f15" v-else>点击领取</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	export default {
		props: {
			code:{
				type:Object,
				default:{}
			},
			info:{
				type:Object,
				default:{}
			}
		},
		data() {
			return{
				receiveInfo:{}
			}
		},
		computed:{
			...mapGetters('user', ['_gameInfo']),
			isMe: function() {
				const boo = this.code.userId == this._gameInfo.userId;
				if(boo){
					this.getDrawReceiveInfo()
				}
				return boo
			},
		},
		methods: {
			toFound(){
				const prizeId=this.info.prizeId;
				uni.redirectTo({
					url:'/pages/draw/found/found?prizeId='+prizeId
				})
			},
			async getDrawReceiveInfo(){
				const res = await this.$api.draw.getDrawReceiveInfo({
					prizeId:this.info.prizeId
				})
				this.receiveInfo = res
				console.log('getDrawReceiveInfo',res)
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				this.$store.dispatch('common/formIdListUp', {
					e: e,
					isSave: true
				})
			},
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	.winning-wrap {
		position: relative;
		width: 690rpx;
		margin: 30rpx auto;
		z-index: 9;
		background-color: #2e2c83;
		border-radius: 10rpx;
		color: white;
		
		.help-top{
			position: relative;
			padding: 30rpx;
			&:before{
				content: ' ';
				position: absolute;
				bottom: 0;
				left: 30rpx;
				right: 30rpx;
				border-bottom: 1px solid #e5e5e5;
				opacity: 0.3;
			}
		}
		
		.share-btn{
			background-color: #e35a2e;
			font-size: 30rpx;
			margin: 0;
			border-radius: 1000px;
			animation: btn 1.5s infinite;
		}
		
		@keyframes btn
		{
			0% {
				transform: scale(1);
			}
			30% {
				transform: scale(0.9);
			}
			100% {
				transform: scale(1);
			}
		}
		
		.help-bottom{
			padding: 30rpx;
		}
		
		.help-share-item{
			padding: 0;
			margin: 0;
			width: 90rpx;
			height: 90rpx;
			background-color: #695cf4;
			border-radius: 1000px;
			overflow: hidden;
			
			image{
				display: block;
				width: 100%;
				height: 100%;
				margin: 0;
			}
		}
	}
		
	.partake:before{
		content: '观看视频广告，参与抽奖';
		position: absolute;
		top: -2em;
		left: 50%;
		width: 360rpx;
		margin-left: -180rpx;
		height: 2.5em;
		line-height: 2.5em;
		text-align: center;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #e35a2e;
		background-color: white;
		box-shadow: 1px 1px 1px #E5E5E5;
		z-index: 99;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		margin-right: 10rpx;
	}
</style>
